import React, { Component } from "react";
import { Form, Input, Table, Button, Divider,Modal } from "antd";
import Content from "../../components/Content/Content";

const data = [];
for (let i = 0; i < 22; i++) {
  data.push({
    key: i,
    strain_number: `ACCC000${i}`,
    other_numberme: 666666666,
    generic_name: `属名 ${i}`,
    words: `种加词 ${i}`,
    strain_name: `学名 ${i}`,
    popular_name: `俗名 ${i}`,
    habitat: `成分 ${i}`,
    potential_use: `用途 ${i}`,
    operate: `London, Park Lane no. ${i}`
  });
}

class Query_mediumForm extends Component {
  constructor(props) {
    super(props);
  }
   columns = [
    {
      title: "任务编号",
      key: "1",
      dataIndex: "strain_number",
      className: "strain_number"
    },
    {
      title: "菌株保藏编号",
      dataIndex: "other_numberme",
      className: "other_numberme"
    },
    {
      title: "筛选菌株编号",
      dataIndex: "generic_name",
      className: "generic_name"
    },
    {
      title: "新增菌种编号",
      dataIndex: "words",
      className: "words"
    },
    {
      title: "菌种类别",
      dataIndex: "strain_name",
      className: "strain_name"
    },
    {
      title: "交汇类别",
      dataIndex: "popular_name",
      className: "popular_name"
    },
    {
      title: "提交时间",
      dataIndex: "habitat",
      className: "habitat"
    },
    {
      title: "提交人",
      dataIndex: "potential_use",
      className: "potential_use"
    },
    {
      title: "操作",
      className: "operate",
      dataIndex: "",
      render: () => (
        <span>
         <Button type="primary" onClick={this.showModal}>
            反馈
          </Button>  
        </span>
      )
    }
  ];
  
  state = {
    selectedRowKeys: [], // Check here to configure the default column
    loading: false,
    visible: false
  };
  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  start = () => {
    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false
      });
    }, 1000);
  };

  onSelectChange = selectedRowKeys => {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  render() {
    const { loading, selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange
    };
    const hasSelected = selectedRowKeys.length > 0;

    return (
      <div>
        <div className="filtrate">
          <p>
            <span className="span">
              <span className="inputName">菌种编号</span>{" "}
              <Input placeholder="" style={{ width: 100 }} />
            </span>
            <span className="span">
              <span className="inputName">菌种保藏编号</span>{" "}
              <Input placeholder="" style={{ width: 100 }} />
            </span>
            <span className="span">
              <span className="inputName">新增菌株编号</span>{" "}
              <Input placeholder="" style={{ width: 100 }} />
            </span>
            <span className="span">
              <span className="inputName">采集样品编号</span>{" "}
              <Input placeholder="" style={{ width: 100 }} />
            </span>
            <span className="span">
              <span className="inputName">菌种类别</span>{" "}
              <Input placeholder="" style={{ width: 100 }} />
            </span>
          </p>
          <p>
            <span className="span">
              <span className="inputName">筛选菌株编号</span>{" "}
              <Input placeholder="" style={{ width: 100 }} />
            </span>
            <span className="span">
              <span className="inputName">序列信息</span>{" "}
              <Input placeholder="" style={{ width: 100 }} />
            </span>
            <span className="span">
              <span className="inputName">菌株近源菌株</span>{" "}
              <Input placeholder="" style={{ width: 100 }} />
            </span>
            <span className="span">
              <span className="inputName">采集样品类</span>{" "}
              <Input placeholder="" style={{ width: 100 }} />
            </span>
            <span className="span">
              <span className="inputName">任务编号</span>{" "}
              <Input placeholder="" style={{ width: 100 }} />
            </span>
          </p>

          <span className="span" >
            <Button type="primary" style={{ width: 80 }}>
              查询
            </Button>
          </span>
         
        <Modal
          title="反馈"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p style={{paddingLeft:30}}>菌种保藏编号：</p>
          <p style={{fontSize:'20px',paddingLeft: 30,color:'black'}}>经复核与上交提供信息一致</p>
          {/* <p style={{paddingLeft:30}}>原因：</p> */}
        </Modal>
        </div>
        <Table
          columns={this.columns}
          dataSource={data}
          bordered
          style={{ marginLeft: 12, padding: 10 }}
        />
      </div>
    );
  }
}
const WrapperedQuery_mediumForm = Form.create({
  name: "query medium"
})(Query_mediumForm);

class ConcurrentFeedback extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onSubmit = () => {
    const { form } = this.form.props;
    form.validateFields((errs, values) => {
      console.log(errs, values);
    });
  };
  render() {
    return (
      <Content>
        <WrapperedQuery_mediumForm
          wrappedComponentRef={ref => (this.form = ref)}
          onSubmit={this.onSubmit}
        />
      </Content>
    );
  }
}

export default ConcurrentFeedback;
